<template>
  <view class="work-container">
    <view class="header">
      <view class="h1">工作台</view>
      <image class="img" src="@/static/images/work_bg.jpg"></image>
    </view>
    <view class="section">
      <view class="scroller">
        <view class="part">
          <view class="terms">
            <view class="term" v-for="term in workbench.basicEntranceApps" :key="term.code" @click="toApplication(term)">
              <image class="img" :src="term.icon"></image>
              <text>{{ term.name }}</text>
            </view>
          </view>
          <view class="group">
            <view class="tuple" v-for="element in workbench.basicModuleApps" :key="element.code" @click="handlePlateClick(element)">
              <view class="img-wrapper">
                <image class="img" :src="element.icon"></image>
              </view>
              <view class="combi">
                <view class="desc">{{ element.name }}</view>
                <view class="phrase">立即查看</view>
              </view>
            </view>
          </view>
        </view>
        <view class="module">
          <view class="title">功能管理</view>
          <view class="list">
            <view class="item" v-for="item in workbench.featureManageApps" :key="item.code" @click="toApplication(item)">
              <image class="img" :src="item.icon"></image>
              <text>{{ item.name }}</text>
            </view>
          </view>
        </view>
        <view class="module">
          <view class="title">订单管理</view>
          <view class="entries">
            <view class="entry" v-for="entry in workbench.orderManagementApps" :key="entry.code" @click="toApplication(entry)">
              <image class="img" :src="entry.icon"></image>
              <text>{{ entry.name }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <uni-popup ref="popup" type="bottom" :is-mask-click="false">
      <view class="popup">
        <view class="popup-head">
          <view class="close" @click="togglePopup(false)"></view>
        </view>
        <view class="popup-content">
          <view class="list">
            <view class="item" @click="showTutorials">老板新手教程</view>
            <view class="item" @click="showTutorials">店长新手教程</view>
            <view class="item" @click="showTutorials">店员新手教程</view>
            <view class="item" @click="showTutorials">财务新手教程</view>
          </view>
        </view>
      </view>
		</uni-popup>
    <uni-popup ref="popupDialog" type="center" :is-mask-click="false">
      <view class="popup-dialog">
        <view class="popup-head">
          <text class="title">{{ currentPopupType.title }}</text>
          <view class="close-btn">
            <uni-icons type="closeempty" size="20" @click="togglePopup(false, 'popupDialog')"></uni-icons>
          </view>
				</view>
        <view class="popup-body">
          <text class="context">{{ currentPopupType.context }}</text>
        </view>
        <view class="popup-foot" v-show="currentPopupType.btnTxt">
          <view class="btn" @click="navigateTo('/pages/shops/apply')">{{ currentPopupType.btnTxt }}</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import { onHide } from '@dcloudio/uni-app'
import { getInfo } from '@/api/index'
import { navigateTo } from '@/utils/navigator'
import workbench from '@/common/js/appConfig'
import { shopAuthenticateStatusMap } from '@/common/js/maps'

const instance = getCurrentInstance()
const popupBusinessTypeMap = {
  UNAUDIT: {
    bussinessVal: shopAuthenticateStatusMap.UNAUDIT,
    title: '提示',
    context: '请先对身份进行认证，再查看相关信息',
    btnTxt: '去认证'
  },
  PENDING: {
    bussinessVal: shopAuthenticateStatusMap.PENDING,
    title: '提示',
    context: '店铺审核中',
    btnTxt: ''
  },
  PASS: {
    bussinessVal: shopAuthenticateStatusMap.PASS,
    title: '提示',
    context: '已认证店铺',
    btnTxt: ''
  }
}
const currentPopupType = ref(popupBusinessTypeMap.UNAUDIT)

const togglePopup = (visible = true, name = 'popup') => {
	if (visible) {
		instance.refs[name].open()
	} else {
		instance.refs[name].close()
	}
}

const showTutorials = () => {
  togglePopup(false)
  navigateTo('/pages/work/tutorial')
}

const toApplication = (app) => {
  // 是否需要鉴权
  app.permission && checkAuthorise(app)
}

const handlePlateClick = (app) => {
  if(app.code === 'cooperation') {
    toApplication(app)
  } else {
    togglePopup()
  }
}

const checkAuthorise = async ({ code, page }) => {
  const handleAuditState = () => {
    if (code === 'cooperation') {
      currentPopupType.value = popupBusinessTypeMap.PASS
      togglePopup(true, 'popupDialog')
    } else {
      page && navigateTo(page)
    }
  }

  const auditStatus = uni.getStorageSync('shopAuditStatus')
  if(auditStatus === shopAuthenticateStatusMap.PASS) {
    handleAuditState()
  } else {
    let { auditState } = await getInfo()
    auditState = Number(auditState)
    if(auditState === shopAuthenticateStatusMap.PENDING) {
      uni.setStorageSync('shopAuditStatus', shopAuthenticateStatusMap.PENDING)
      currentPopupType.value = popupBusinessTypeMap.PENDING
      togglePopup(true, 'popupDialog')
    } else if(auditState === shopAuthenticateStatusMap.PASS) {
      uni.setStorageSync('shopAuditStatus', shopAuthenticateStatusMap.PASS)
      handleAuditState()
    } else {
      currentPopupType.value = popupBusinessTypeMap.UNAUDIT
      togglePopup(true, 'popupDialog')
    }
  }
}

onHide(() => {
  togglePopup(false)
  togglePopup(false, 'popupDialog')
})
</script>

<style lang="scss">
.work-container {
  height: 100vh;
  font-family: PingFang SC, PingFang SC;
  background-color: #fff;
  .header {
    height: 419rpx;
    position: relative;
    .h1 {
      position: absolute;
      top: 107rpx;
      left: 50%;
      transform: translateX(-50%);
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      z-index: 1;
    }
    .img {
      width: 100%;
      height: 100%;
    }
  }
  .section {
    position: relative;
    top: -250rpx;
    height: calc(100vh - 250rpx);
    padding: 40rpx 32rpx 0 32rpx;
    background-color: #fff;
    border-radius: 60rpx 60rpx 0 0;
    .scroller {
      height: 100%;
      overflow: scroll;
    }
    .part {
      .terms {
        display: flex;
        padding-left: 32rpx;
        .term {
          display: flex;
          flex-direction: column;
          align-items: center;
          &:not(:last-child) {
            margin-right: 82rpx;
          }
          .img {
            width: 88rpx;
            height: 88rpx;
          }
          text {
            font-size: 24rpx;
            color: #222;
            margin-top: 12rpx;
          }
        }
      }
      .group {
        margin-top: 32rpx;
        display: flex;
        .tuple {
          flex: 1;
          display: flex;
          padding: 24rpx 32rpx;
          box-shadow: 0rpx 1rpx 10rpx 1rpx rgba(220,220,220,0.16);
          border-radius: 16rpx;
          background-color: #F8FBFF;
          &:first-child {
            margin-right: 26rpx;
          }
          .img-wrapper {
            width: 78rpx;
            height: 78rpx;
            .img {
              height: 100%;
            }
          }
          .combi {
            margin-left: 32rpx;
            .desc {
              font-weight: bold;
              font-size: 32rpx;
              color: #334770;
            }
            .phrase {
              font-size: 24rpx;
              color: #4A698D;
            }
          }
        }
      }
    }
    .module {
      margin-top: 32rpx;
      .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #222;
      }
      .list {
        margin-top: 20rpx;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-row-gap: 20rpx;
        grid-column-gap: 26rpx;
        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border-radius: 22rpx;
          padding: 20rpx 0;
          &:nth-child(1) {
            background-color: rgba(255, 170, 64, 0.05);
          }
          &:nth-child(2) {
            background-color: rgba(125, 212, 255, 0.05);
          }
          &:nth-child(3) {
            background-color: rgba(155, 231, 83, 0.05);
          }
          &:nth-child(4) {
            background-color: rgba(214, 141, 255, 0.05);
          }
          &:nth-child(5) {
            background-color: rgba(251, 89, 125, 0.05);
          }
          &:nth-child(6) {
            background-color: rgba(167, 152, 255, 0.05);
          }
          &:nth-child(7) {
            background-color: rgba(254, 110, 71, 0.05);
          }
          &:nth-child(8) {
            background-color: rgba(106, 139, 252, 0.05);
          }
          &:nth-child(9) {
            background-color: rgba(120, 174, 255, 0.05);
          }
          &:nth-child(10) {
            background-color: rgba(150, 239, 180, 0.05);
          }
          &:nth-child(11) {
            background-color: rgba(253, 137, 163, 0.05);
          }
          &:nth-child(12) {
            background-color: rgba(76, 216, 255, 0.05);
          }
          .img {
            width: 48rpx;
            height: 48rpx;
          }
          text {
            font-size: 24rpx;
            color: #222;
            margin-top: 12rpx;
          }
        }
      }
      .entries {
        margin-top: 20rpx;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-row-gap: 20rpx;
        grid-column-gap: 26rpx;
        .entry {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .img {
            width: 72rpx;
            height: 72rpx;
          }
          text {
            margin-top: 12rpx;
            font-size: 24rpx;
            color: #222;
          }
        }
      }
    }
  }
  .popup {
    border-radius: 32rpx 32rpx 0 0;
    background-color: #fff;
    padding: 32rpx 32rpx 100rpx 32rpx;
    .popup-head {
      display: flex;
      justify-content: flex-end;
      .close {
        position: relative;
        width: 30rpx;
        height: 30rpx;
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          width: 30rpx;
          height: 2rpx;
          border-radius: 1rpx;
          background-color: #555;
          transform: rotate(45deg);
          transform-origin: center;
        }
        &::after {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          width: 30rpx;
          height: 2rpx;
          border-radius: 1rpx;
          background-color: #555;
          transform: rotate(-45deg);
          transform-origin: center;
        }
      }
    }
    .popup-content {
      margin-top: 40rpx;
      .list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 16rpx;
        .item {
          border-radius: 16rpx;
          text-align: center;
          height: 126rpx;
          line-height: 126rpx;
          font-size: 28rpx;
          font-weight: bold;
          color: #fff;
          &:nth-child(1) {
            background-color: #2964F4;
          }
          &:nth-child(2) {
            background-color: #927FC7;
          }
          &:nth-child(3) {
            background-color: #68C8AA;
          }
          &:nth-child(4) {
            background-color: #CF9C4F;
          }
        }
      }
    }
  }
  .popup-dialog {
    position: relative;
    padding-top: 32rpx;
    width: 542rpx;
    border-radius: 20rpx;
    background-color: #fff;
    .close-btn {
      position: absolute;
      top: 24rpx;
      right: 24rpx;
      display: flex;
      align-items: center;
      .uni-icons {
        font-size: 28rpx !important;
      }
    }
    .popup-head {
      text-align: center;
      .title {
        font-weight: bold;
        font-size: 36rpx;
        color: #000;
        line-height: 32rpx;
      }
    }
    .popup-body {
      padding: 40rpx 32rpx;
      text-align: center;
      .context {
        font-size: 32rpx;
        color: #444;
      }
    }
    .popup-foot {
      border-top: 1rpx solid #e5e5e5;
      .btn {
        text-align: center;
        padding: 24rpx 0;
        font-size: 32rpx;
        line-height: 1;
        color: #0080FF;
      }
    }
  }
}
</style>
